<template>
  <div class="about">
    <p ref="pDom">uname: {{ uname }}</p>
    <button @click="setUname">setUname</button>
    <p v-if="homeData.object">{{ homeData.object }}</p>
  </div>
</template>

<script>
import { ref, onMounted, onUpdated, reactive, readonly } from "vue";
export default {
  name: "aboutView",
  setup() {
    const uname = ref("小明");
    const setUname = () => {
      uname.value = Date.now();
    };
    const pDom = ref();
    const request = async url => {
      const data = await fetch(url)
        .then(res => res.json())
        .then(data => data.data);
      return data;
    };
    const homeData = reactive({
      object: null,
    });
    request(
      "https://m.edianyun.com/product/queryIndexContent?isnToLoginPage=true"
    ).then(data => {
      homeData.object = readonly(data);
    }); // 初始化请求，setup中没有created钩子了

    // let homeData = reactive({
    //   object: {},
    // });
    // onMounted(async () => {
    //   // console.log(pDom.value);
    //   // pDom.value.style.backgroundColor = "blue";
    //   homeData.object = readonly(
    //     await request(
    //       "https://m.edianyun.com/product/queryIndexContent?isnToLoginPage=true"
    //     )
    //   );
    // });
    onUpdated(() => {
      console.log(pDom.value); // 获取的是由数据变化导致的组件渲染后，最新的DOM。
    });
    return {
      uname,
      pDom,
      setUname,
      homeData,
    };
  },
};
</script>
